<template>
  <div class="login-box">
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      class="Login-Form"
      @keyup.enter="submitForm('loginForm')"
      ><h2>用户登录</h2>
      <el-form-item prop="userName">
        <el-input
          type="txt"
          v-model="loginForm.userName"
          autocomplete="off"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input
          type="password"
          v-model="loginForm.pwd"
          autocomplete="off"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <!-- v-loading=loading   加载中 -->
        <el-button
          type="primary"
          v-loading="loading"
          @click="submitForm('loginForm')"
          >提交</el-button
        >
        <!-- <img src="" alt=""> -->
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import mock from "../mock/mock";
export default {
  name: "VscodeInsidersLogin",
  components: {
    mock
  },
  data() {
    return {
      loginForm: {
        userName: "",
        pwd: "",
      },

      loading: false,
      // 自定义验证规则  trigger:触发条件
      rules: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        pwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.data();
  },
  methods: {
    submitForm(formName) {
      // 验证 ： validate  验证的信息：valid
      // 自定义验证规则
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$http("http://localhost:3001/api/login", {
            params: this.loginForm,
          }).then((res) => {
            if (res.data == "success") {
              console.log(res);
              this.loading = true;
              setTimeout(() => {
                sessionStorage.setItem("userName", this.loginForm.userName); //使用sessionStorage.setItem设置userName为form表单里面的用户名
                this.$router.push("/about");
                this.loading = false;
              }, 2000);
            }else{
              alert("密码或者用户名错误，请重新输入")
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    data() {
      this.$http.get("/getData").then((res) => {
        console.log(res.data.arrar);
      });
    },
  },
};
</script>

<style  scoped>
.login-box {
  width: 100%;
  height:90vh;
  background: url(../../src/assets/true.jfif) no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Login-Form {
  width: 380px;
  height: 300px;
  /* background-color: aqua; */
}
</style>